<template>
  <div>
    <TableComponent
      :tableData="tableData"
      :column="tableColumn"
      @getAddorEdit="getAddorEdit"
      @getRefresh="getSysMenuTree"
      tableTitle="菜单管理"
      :isShowPaging="false"
      v-loading="loading"
      row-key="menuId">
      <template v-slot:text="{ scope, item }">
        <span>{{ scope.row[item.field] }}</span>
      </template>
      <template v-slot:icon="{ scope, item }">
        <div style="display: flex; justify-content: center">
          <svg-icon :iconClass="scope.row.meta.icon" />
        </div>
      </template>
      <template v-slot:operation="{ scope, item }">
        <el-button type="success" size="small" @click="getAddorEdit(scope.row, 'addChild')">新增子级</el-button>
        <el-button type="primary" size="small" @click="getAddorEdit(scope.row, 'edit')">编辑</el-button>
        <el-popconfirm title="Are you sure to delete this?" @confirm="getDelete(scope.row.menuId)">
          <template #reference>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </TableComponent>
    <MenuDialog ref="menuDialog" @getSysMenuTree="getSysMenuTree"></MenuDialog>
  </div>
</template>

<script setup lang="ts" name="menu">
  import { ref } from 'vue'
  import type { SysMenuDo } from './type'
  import { sysMenuTree, removeSysMenuAndSysRoleMenuByMenuId } from '@/api/sysMenu'
  import TableComponent from '@/components/TableComponent/TableComponent.vue'
  import MenuDialog from './component/MenuDialog.vue'
  const menuDialog = ref<any>(null)
  const tableData = ref([])
  const tableColumn = [
    { label: '菜单名称', field: 'title', slotName: 'text', align: 'left' },
    { label: '路由名称', field: 'name', slotName: 'text', align: 'left' },
    { label: '路由路径', field: 'path', slotName: 'text', align: 'left' },
    { label: 'i18nKey', field: 'i18nKey', slotName: 'text' },
    { label: '组件路径', field: 'component', slotName: 'text' },
    { label: '排序', field: 'orderNum', slotName: 'text', width: 80 },
    { label: '路由图标', field: 'icon', slotName: 'icon', width: 90 },
    { label: '操作', field: 'operation', slotName: 'operation', width: 280 },
  ]
  const loading = ref<boolean>(false)
  function getSysMenuTree() {
    loading.value = true
    sysMenuTree({}).then((res) => {
      tableData.value = res.data
      loading.value = false
    })
  }
  getSysMenuTree()
  function getAddorEdit(item: SysMenuDo, type: string) {
    menuDialog?.value?.getAddorEdit(item, type)
  }
  function getDelete(menuId: string) {
    removeSysMenuAndSysRoleMenuByMenuId({ menuId }).then((res) => {
      getSysMenuTree()
    })
  }
</script>

<style scoped></style>
